<template>
	  <div class="massagck">
	  	    <div class="massagck-one">
	  	    	<a href="jacascript:;" v-for="item in lists">{{item.name}}</a>
	  	    </div> 
	  	     <div class="massagck-two">
	  	     		<a href="">
	  	     			<div class="massimg">
	  	     				<img src=""/>
	  	     			</div>
	  	     			<div class="massname">
	  	     				  <div>
	  	     				  	<h3>李宁</h3>
	  	     				  	<span>2018-04-10</span>
	  	     				  </div>
	  	     				  <p>个人说明说密明晃晃或或或或</p>
	  	     			</div>
	  	     		</a>
	  	     </div>
	  </div>
</template>

<script>
	export default{
		data(){
			return{
				lists:[
			{name:'评论'},{name:'赞'},{name:'私信'},{name:'系统消息'}
			]
			}
			
		}
	}
</script>

<style>
	.massagck{
		width: 250px;
		height: 376px;
		background-color: greenyellow;
		position: fixed;
		top: 5%;
		right: 55px;
		z-index: 9999;
		padding-top: 24px;
	}
	.massagck-one{
		text-align: center;
		border-bottom: 1px solid #4290CF;
		padding-bottom: 10px;
	}
	.massagck-one a{
		margin: 0 15px;
		
	}
	.massagck-two{
		padding: 0 15px;
	}
	.massagck-two a{
		height: 50px;
		display: block;
	}
	.massimg{
		width: 45px;
		height: 45px;
		border: 1px solid #FF8DA9;
		border-radius: 50%;
	}
	.massname,.massimg{		
		display: inline-block;
	}
	.massname{
		width:160px;
		margin-top: 10px;
	}
	.massname h3{
		display: inline-block;
	}
</style>